<template>
  <common-card title="今日交易用户数" :value="orderUser|numberFormat">
    <template>
      <v-chart :option="getOption()" autoresize/>
    </template>
    <template v-slot:bottom>
      <span>退货率</span>
      <span class="emphasis">{{returnRate + '%'}}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayUsers',

  computed: {
    ...mapState({
      "orderUser": state => state.data.reportData.orderUser,
      "returnRate": state => state.data.reportData.returnRate,
      "orderUserTrend": state => state.data.reportData.orderUserTrend || [],
      "orderUserTrendAxis": state => state.data.reportData.orderUserTrendAxis || [],
    })
  },

  methods: {
    getOption () {
      return {
        xAxis: {
          show: false,
          data: this.orderUserTrendAxis
        },
        yAxis: {
          show: false,
        },
        series: [{
          name: '实时交易用户数',
          type: 'bar',
          data: this.orderUserTrend,
          barWidth: '40%'
        }],

        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
        tooltip: {
          formatter (params) {
            console.log(params)
            const {name, value, seriesName, marker} = params
            return `
              ${name} <br>
              ${marker}${seriesName} ${value}
            `
          }
        },

        color: ['blue']
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
